<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FramedItem from '../FramedItem.vue'
import InlineItem from '../InlineItem.vue'
import enemydata from '../../data/EnemyData.json'
import { getText } from '../../store/txtstore.js'

const props = defineProps(['data'])
const router = useRouter()

const enemies = ref()
if (props.data.enemy) {
    enemies.value = []
    for (const enemyId of props.data.enemy) {
        const enemy = enemydata.data[enemyId]
        if (enemy) {
            enemies.value.push([enemyId, getText(enemy[52][1]), enemy[24]])
        }
    }
}

const selected = ref(false)
function select() {
    selected.value = !selected.value
}

function viewEnemy(event) {
    const routeData = router.resolve({ path: '/enemy/' + event.currentTarget.getAttribute('uid') })
    window.open(routeData.href, '_blank')
}
</script>

<template>
    <div :class="{ 'stage-item': true, selected: selected }">
        <div>推荐等级 {{ data.level }}</div>
        <div class="title" @click="select">{{ data.id }} {{ data.number }} {{ data.title }}</div>
        <div>{{ data.introduction }}</div>
        <div class="condition">通关条件：{{ data.condition }}</div>
        <div v-show="data.challenge">
            <p class="header">挑战目标</p>
            <ul>
                <li v-for="challenge of data.challenge" class="challenge">{{ challenge }}</li>
            </ul>
        </div>
        <div v-show="data.grade" class="grade">
            <p class="header">同调评级</p>
            <table>
                <tr v-for="(grade, idx) of data.grade">
                    <td><img :src="`/exilium/icons/Icon_SimcombatGold_Rated_${idx+1}_S.png`"></td>
                    <td>同调值达到{{ grade }}及以上</td>
                </tr>
            </table>
        </div>
        <div v-if="enemies">
            <p class="header">敌方单位（点击图标可查看详情）</p>
            <div v-for="enemy of enemies" class="enemy" :uid="enemy[0]" @click="viewEnemy">
                <img :src="`/exilium/icons/monster/Monster_Head_${enemy[2]}.png`">
                <span>{{ enemy[1] }}</span>
                <span class="enemy-lv">Lv.{{ data.level }}</span>
            </div>
        </div>
        <div v-if="data.reward">
            <p class="header">特殊奖励</p>
            <InlineItem v-if="data.exp > 0" item-id="200" :num="data.exp" show-name="show-name" />
            <InlineItem v-for="item of data.reward" :item-id="item[0]" :num="item[1]" show-name="show-name" />
        </div>
        <div v-if="data.drop && !data.grade">
            <p class="header">作战奖励</p>
            <InlineItem v-if="data.dropExp > 0" item-id="200" :num="data.dropExp" show-name="show-name" />
            <InlineItem v-for="item of data.drop" :item-id="item[0]" :num="item[1]" show-name="show-name" />
        </div>
        <div v-else-if="data.drop">
            <p class="header">作战奖励</p>
            <FramedItem item-id="200" :num="data.dropExp" />
            <FramedItem v-for="(item, idx) of data.drop" :item-id="item[0]" :num="item[1]" :corner="`/exilium/icons/Icon_GoldRated${idx+1}.png`" />
        </div>
        <div class="cost">消耗
            <InlineItem item-id="101" :num="data.stamina" />
        </div>
    </div>
</template>

<style scoped>
.stage-item {
    border-radius: 2px;
    box-shadow: 0 1px 3px gray;
    padding: 0.25em;
}

.stage-item * {
    height: 0;
    visibility: collapse;
}

.stage-item .title,
.stage-item.selected * {
    height: initial;
    visibility: visible;
}
.stage-item.selected figure {
    height: 70px;
}

.title {
    cursor: pointer;
    font-size: large;
}

.condition {
    padding-top: 0.25em;
}

.header {
    background: #37474f;
    box-shadow: 0 1px 2px #37474f;
    color: white;
    margin-bottom: 2px;
    padding-left: 0.5em;
}

.challenge {
    font-size: small;
}

.grade img {
    width: 40px;
}

.enemy {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    width: max-content;
}

.enemy img {
    width: 64px;
}

.enemy span {
    font-size: small;
}

.cost {
    align-items: center;
    background: rgba(0, 0, 0, .1);
    display: flex;
    font-size: small;
    padding-left: 0.5em;
}</style>